]<template>
	<view class="content">
		<view class="search">
			<input placeholder="请输入商品" :value="inputValue"  @input="textInput" >
			<button v-show="isShow" @click="cancle">取消</button>
		</view>
		<!--  -->
		<view class="search_content" >
			<view v-if="searchList.length!=0">
				<view class="border" v-for="item in searchList">
					<view class="search_item" @click="godetail(item.goods_id)"> 
					   {{item.goods_name}}
					</view>
				</view>
			</view>
			<view v-else >
				<view class="history">历史记录</view>
				<view class="oldData" v-for="item in oldData">
					<view class="search_data" @click="godetail(item.goods_id)"> 
					   <view >{{item}}</view> 
					   <image src="../../static/delect.png" mode="widthFix" @click="delect"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		 name: "textInput",
		data() {
			return {
				inputValue:"",
				searchList:[],
				isShow:false,
				oldData:[],
				showOld:false
			}
		},
		timeId:-1,
		onLoad() {
			this.getOlddata();
			if(this.oldData){
				this.showOld=true
			}else{
				this.showOld=false
			}
		},
		onShow() {
			const info=uni.getStorageSync('search')
			this.oldData=info
		},
		methods: {
			textInput(res){
				// 触发事件
				this.isShow=true
			   console.log("输入的文本内容是:",res.detail.value)
			   const value=res.detail.value;   
			    clearTimeout(this.timeId) //清除定时器
			   if(!value){
				   this.searchList=[]
				   this.isShow=false
				   return
			   }
			   this.timeId=setTimeout(()=>{
				   // // 添加缓存
				   const info =uni.getStorageSync('search')||[];
				   info.push(value);
				   uni.setStorageSync('search',info)
				   this.getdata(value);
			   },1000)
			},
			async getdata(query){
				const res=await this.$myRequest({
					url:'/api/public/v1/goods/qsearch?query='+query
				})
				console.log(res);
				this.searchList=res.data.message
		},
		godetail(res){
			uni.navigateTo({
				url:'/pages/good_detail/good_detail?goods_id='+res
			})
			console.log(res)
		},
		cancle(){
			this.searchList=[],
			this.isShow=false,
			this.inputValue=""
		},
		// 搜素历史
		getOlddata(){
			const info=wx.getStorageSync('search');
			this.oldData=info;
		}
	},
	}
</script>

<style lang="scss">
	page{
		background-color: #dedede;
	}
  .search{
	  padding: 20rpx;
	  height: 60rpx;
	  display: flex;
	  input{
		  padding: 0 10rpx;
		  background-color: #fff;
		  flex: 1;
		  height: 100%;
		  border-radius: 20rpx;
	  }
	  button{
		  width: 110rpx;
		  height: 100%;
		  font-size: 28rpx;
		  padding: 0;
		  margin: 0 10rpx;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
  }
  .search_content{
	  border-radius: 30rpx 30rpx 0 0;
  	  background-color: #fff;
  	  .search_item{
		  padding: 0 10rpx;
		  display: -webkit-box;
		  overflow: hidden;
		  -webkit-box-orient:vertical;
		  -webkit-line-clamp:1;
		  height: 80rpx;
		  margin: 0 2%;
		  width: 95%;
		  border-bottom: 1rpx solid #eee;
  		  line-height: 80rpx;
  	  }
	  .history{
		  height: 80rpx;
		  line-height: 80rpx;
		  padding-left: 20rpx;
		  font-size: 35rpx;
		  font-weight: bold;
	  }
	  .oldData{
		  .search_data{
			  display: flex;
			  justify-content: space-between;
			  view{
				  padding-left: 20rpx;
				  line-height: 70rpx;
				  height: 70rpx;
			  }
			  border: 1rpx solid gainsboro;
			  image{
				  padding: 10rpx 0;
			  	  width: 50rpx;
				  height: 50rpx;
			  }
		  }
	  }
}
</style>
